<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        /*ul中的li改成红色,后代都会，即使再被包裹*/
        ul li {
            color: red;
        }

        ul li a {
            color: yellow;
        }

        ol li {
            color: green;
        }

        /*不仅仅是元素的后代 ,class的后代也行 */
        .subject li {
            color: pink;
        }

        .subject li .dd {
            color: chocolate;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <div>
            <li>
                4
            </li>
        </div>
        <li><a href="">5</a></li>
    </ul>

    <ol>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ol>

    <ol class="subject">
        <li>
            <div class="dd">dd</div>
        </li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ol>
</div>
</body>
</html>